<template>
  <div style="width: 260px;height: max-content;border: 3px solid #eee7e7;padding-bottom: 10px">

    <h1 style="font-size: 18px;margin-left: 10px">推荐类型</h1>
    <el-radio-group v-model="reCRadio" class="ml-4">
      <el-radio style="margin-left: 20px;width: 100%" label="1" @change="reCRadioChange(1)" size="large">
        不推荐
      </el-radio>
      <el-radio style="margin-left: 20px;width: 100%" label="2" @change="reCRadioChange(2)" size="large">
        按借阅历史推荐
      </el-radio>
      <el-radio style="margin-left: 20px;width: 100%" label="3" @change="reCRadioChange(3)" size="large">
        按用户评分推荐
      </el-radio>
    </el-radio-group>

    <h1 style="font-size: 18px;margin-left: 10px;margin-top: 10px">按类型筛选</h1>
    <el-radio-group v-model="typeRadio" class="ml-4">
      <el-radio style="margin-left: 20px;" v-for="item in typeData"
                @change="typeRadioChange" :label="item.typeId" size="large">
        {{ item.typeName }}
      </el-radio>
    </el-radio-group>

    <!--<h1 style="font-size: 18px;margin-left: 10px;margin-top: 10px">按价格筛选</h1>-->
    <!--<div style="width: 90%;margin-left: auto;margin-right: auto">-->
    <!--  <el-slider style="margin-top: 15px;margin-right: 10px" v-model="priceBetValue" range show-input size="small"-->
    <!--             @change="priceBetChange" :min="priceBet.min" :max="priceBet.max" />-->
    <!--</div>-->

    <h1 style="font-size: 18px;margin-left: 10px;margin-top: 10px">按评级筛选</h1>
    <el-rate @change="scoreChange" style="margin-left: 10px;margin-top: 5px" v-model="scoreNum" />

  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";

let typeRadio = ref('0')
let reCRadio = ref('1')
let scoreNum = ref(5)
let typeData = ref([])
let priceBet = reactive({})
const priceBetValue = ref([])

let emit = defineEmits(['meChange'])

const reCRadioChange = (num)=>{
  //console.log("reCRadioChange"+num);
  let emitArr = [reCRadio.value,typeRadio.value,priceBetValue.value[0],priceBetValue.value[1],scoreNum.value]
  emit("meChange", emitArr)
}

const typeRadioChange = ()=>{
  //console.log("typeRadioChange"+ typeRadio.value);
  let emitArr = [reCRadio.value,typeRadio.value,priceBetValue.value[0],priceBetValue.value[1],scoreNum.value]
  emit("meChange", emitArr)
}

const scoreChange = (num)=>{
  //console.log("scoreChange"+ scoreNum.value);
  let emitArr = [reCRadio.value,typeRadio.value,priceBetValue.value[0],priceBetValue.value[1],scoreNum.value]
  emit("meChange", emitArr)
}

const priceBetChange = (value)=> {
  //console.log("priceBetChange" + value[0]);
  //console.log("priceBetChange" + value[1]);
  let emitArr = [reCRadio.value,typeRadio.value,priceBetValue.value[0],priceBetValue.value[1],scoreNum.value]
  emit("meChange", emitArr)
}

const getBookTypes = ()=>{
  axios.get('/type/second').then(res => {
    //console.log(res.data.data);
    typeData.value = res.data.data;
    typeRadio.value = typeData.value[0].typeId
    //getBookPriceBet();
    emit("meChange", [1,typeData.value[0].typeId, 0,0,5])
  }).catch(error => {
    ElMessage.error(error)
  })
}
getBookTypes();


const getBookPriceBet = ()=>{
  axios.get('/book/price/bet').then(res => {
    //console.log(res.data.data);
    priceBet = res.data.data;
    priceBetValue.value[0] = priceBet.min;
    priceBetValue.value[1] = priceBet.max;
    let emitArr = [reCRadio.value,typeRadio.value,priceBetValue.value[0],priceBetValue.value[1],scoreNum.value]
    emit("meChange", emitArr)
  }).catch(error => {
    ElMessage.error(error)
  })
}

</script>

<style scoped>
.el-rate{
  --el-rate-icon-margin: 0px;
  --el-rate-icon-size: 30px;
  --el-rate-fill-color: red;
}
</style>
